/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
//  1.1 获取频道列表数据    可以用 then() 方法获取   也可以用 async await 获取   这里复习一下 async await
async function setChannleList() {
  const res = await axios({
    url: '/v1_0/channels'
  })
  //console.log(res) // 的到响应拦截处理后的数据
  // console.log(res.data.channels) // 需要的数据
  //  1.2 展示到下拉菜单中
  const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map((item) => `<option value='${item.id}' >${item.name}</option>`).join('')
  // console.log(htmlStr)
  document.querySelector('.form-select').innerHTML = htmlStr
}

// 网页运行后，默认调用一次
setChannleList()

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
//   可以用 then() 方法获取   也可以用 async await 获取   这里复习一下 async await
// 2.2 选择文件并保存在 FormData
document.querySelector('.img-file').addEventListener('change', async (e) => {
  const file = e.target.files[0] // 获取图片文件
  const fd = new FormData()
  fd.append('image', file)
  // 2.3 单独上传图片并得到图片 URL 网址
  const res = await axios({
    url: '/v1_0/upload',
    method: 'POST',
    data: fd
  })
  //console.log(res.data.url) // 上传图片后，服务器返回该图片的 url 网址
  //  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
  const imgUrl = res.data.url // 获得上传图片后，服务器返回该图片的 url 网址
  document.querySelector('.rounded').src = imgUrl // 回显到 img 标签
  document.querySelector('.rounded').classList.add('show') // 显示 img 标签
  document.querySelector('.place').classList.add('hide') // 隐藏 +号上传标签
})
// 优化： 点击 img 可以重新切换封面   这里我用方法 1
// 点击 img 可以重新切换封面方法1：给 img 标签 加入   <label for="img"></label>
// 方法 2： 思路： img 点击 => 用 JS 方式触发文件选择元素 click 事件方法  也就是 模拟点击
/* document.querySelector('.rounded').addEventListener('click', () => {
  document.querySelector('.img-file').click() // 当 图片标签点击了后，让上传文件的标签模拟点击一次
}) */ // 有 bug 更换图片时取消更换，会导致图片回显失败!!!!!!!

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
//  3.1 基于 form-serialize 插件收集表单数据对象       继续使用   async await 获取 后台数据
document.querySelector('.send').addEventListener('click', async (e) => {
  if (e.target.innerHTML !== '发布') return // 5.1 判断按钮文字，区分业务（因为共用一套表单）  如果 点击的按钮 文字 不是发布 就 退出这个函数
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  // 发布文章的时候，不需要 id 属性，所以可以删除掉(id 为了后续做编辑使用)
  delete data.id // 删除 data 对象的 id属性
  console.log(data) // 查看 data对象
  // 自己收集封面图片地址并保存到 data 对象中      看 新增-文章的接口文档需要声明参数，则收集什么参数
  // 为 data 对象 添加 cover 对象属性
  data.cover = {
    type: 1, // 封面类型
    images: [document.querySelector('.rounded').src] // 封面图片 的 URL 网址
  }
  // 3.2 基于 axios 提交到服务器保存
  try {
    const res = await axios({
      url: '/v1_0/mp/articles',
      method: 'POST',
      // 请求头不需要写了， 因为请求拦截器已经携带了
      data
    })
    // 3.3 调用 Alert 警告框反馈结果给用户
    myAlert(true, '发布成功')
    // 3.4 重置表单并 1.5 秒后跳转到列表页
    form.reset()
    // 封面需要手动重置
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.remove('hide')
    // 富文本编辑器重置   wangEditor 官网里的文档 有说明
    editor.setHtml('')
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500)
  } catch (error) {
    // console.dir(error.response.data.message) // 错误提示消息
    myAlert(false, error.response.data.message)
  }
})

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */

// 为不污染其他变量，使用立即执行函数
;(function () {
  // 4.2 发布文章页面接收参数判断（共用同一套表单）
  //console.log(location.search) // 拿到?以及查询参数字符串   就是 点击修改 icon 发过来的 文章 id
  const paramsStr = location.search // 把?以及查询参数字符串 用 paramsStr 存着
  const params = new URLSearchParams(paramsStr) // 创建 URLSearchParams 对象   把 paramsStr 放进去   开头的’?’ 字符会被忽略
  params.forEach(async (value, key) => {
    // 用 forEac 方法遍历出 元素 和 下标   也就是  值 和 属性名
    // console.log(value, key)
    // 当前有要编辑的文章 id 被传入过来
    if (key === 'id') {
      // 4.3 修改标题和按钮文字
      document.querySelector('.title span').innerHTML = '修改文章'
      document.querySelector('.send').innerHTML = '修改'
      // 4.4 获取文章详情数据并回显表单
      const res = await axios({
        url: `/v1_0/mp/articles/${value}`
      })
      console.log(res)
      // 组织我仅仅需要的数据对象，为后续遍历回显到页面上做铺垫
      const dataObj = {
        channel_id: res.data.channel_id, // 频道 id
        title: res.data.title, //标题
        rounded: res.data.cover.images[0], // 封面图片地址
        content: res.data.content, // 富文本数据
        id: res.data.id // <input type="text" name="id" hidden /> 这条隐藏域需要存 编辑的这条文章的 id
      }
      // 遍历数据对象属性，映射到页面元素上，快速赋值      Object.keys(dataObj) 取出对象的全部属性名
      Object.keys(dataObj).forEach((key) => {
        // 遍历到 属性名为： rounded 时
        if (key === 'rounded') {
          // 封面设置
          if (dataObj[key]) {
            // 有封面  就 把图片地址放入并且显示图片，隐藏 ＋号
            document.querySelector('.rounded').src = dataObj[key]
            document.querySelector('.rounded').classList.add('show')
            document.querySelector('.place').classList.add('hide')
          }
          // 遍历到 属性名为： content 时
        } else if (key === 'content') {
          // 富文本内容   官方文档的方法 修改富文本框的 值
          editor.setHtml(dataObj[key])
        } else {
          // 用数据对象属性名，作为标签 name 属性选择器值来找到匹配的标签
          document.querySelector(`[name=${key}]`).value = dataObj[key]
        }
      })
    }
  })
})()

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async (e) => {
  // 5.1 判断按钮文字，区分业务（因为共用一套表单）
  //  console.dir(e.target)
  if (e.target.innerHTML !== '修改') return // 如果 点击的按钮 文字 不是修改 就 退出这个函数
  // 修改文章逻辑
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  console.log(data)
  // 5.2 调用编辑文章接口，保存信息到服务器
  try {
    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`, // 隐藏表单域的 id
      method: 'PUT',
      data: {
        ...data, // 展开运算符
        cover: {
          // 可以直接 -1 让后端判断   也可以 自己获取 图片路径，如果存在 值是 1 不存在 值是 0
          type: document.querySelector('.rounded').src ? 1 : 0,
          // 数组里面放 图片的 url 网址
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    console.log(res)
    myAlert(true, '修改文章成功')
    setTimeout(() => {
      //  修改成功 1.5 秒后跳转到 内容管理
      location.href = '../content/index.html'
    }, 1500)
  } catch (error) {
    myAlert(false, error.response.data.message)
  }
})
